<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/ol.css" rel="stylesheet" />
		<!--
        	作者：1034023223@qq.com
        	时间：2017-09-21
        	描述：引入openlayers
        -->
		<script src="js/ol-debug.js"></script>

		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			#map {
				width: 100%;
				position: fixed;
				top: 45px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
			
			#footer {
				width: 100%;
				position: fixed;
				top: 0;
				background: rgba(52, 52, 52, 0.5);
				color: #fff;
				font-size: 12px;
				box-sizing: border-box;
				z-index: 9999;
				top: auto!important;
				bottom: 0;
				height: 48px;
			}
			
			#type {
				width: 30%;
				right: 0;
				position: fixed;
				background: rgba(52, 52, 52, 0.5);
				color: #FFFFFF;
				z-index: 9999;
			}
			
			.icon_style {
				display: flex;
				justify-content: center;
			}
			
			#marker {
				width: 20px;
				height: 20px;
				border: 1px solid #088;
				border-radius: 10px;
				background-color: #0FF;
				opacity: 0.5;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
				z-index: 9999;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			.mui-popover {
				height: 140px;
			}
			
			#vienna {
				text-decoration: none;
				color: white;
				font-size: 11pt;
				font-weight: bold;
				text-shadow: black 0.1em 0.1em 0.2em;
			}
			
			.popover-content {
				min-width: 180px;
			}
			
			.icon_style {
				height: 48px;
				align-items: center;
			}
			
			.selected_layer {
				background: blue;
				color: white;
			}
			
			.cancle {
				background: darkgoldenrod;
				color: #FFFFFF;
				font-size: 28px;
				display: inline-block;
				width: 120px;
				height: 40px;
				text-align: center;
				padding-top: 10px;
				border: double;
			}
			
			.confrim {
				background: green;
				color: #FFFFFF;
				font-size: 28px;
				display: inline-block;
				width: 120px;
				height: 40px;
				text-align: center;
				padding-top: 10px;
				border: double;
			}
			
			.confrim:hover {
				background: greenyellow;
			}
			
			.cancle:hover {
				background: red;
			}
			
			.confrim_style {
				position: fixed;
				bottom: 50px;
				right: 10px;
			}
			
			#map .ol-zoomslider {
				top: 8px;
				left: auto;
				right: 8px;
				background-color: rgba(255, 69, 0, 0.2);
				width: 200px;
				height: 15px;
				padding: 0;
				box-shadow: 0 0 5px rgb(255, 69, 0);
				border-radius: 20px;
			}
			
			#map .ol-zoomslider:hover {
				background-color: rgba(255, 69, 0, 0.3);
			}
			
			#map .ol-zoomslider-thumb {
				height: 15px;
				width: 15px;
				margin: 0;
				filter: none;
				background-color: rgba(255, 69, 0, 0.6);
				border-radius: 20px;
			}
			
			#map a.ol-zoomslider-handle:hover {
				background-color: rgba(255, 69, 0, 0.7);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<span class="mui-icon mui-icon-paperplane mui-pull-left" id="location_btn"></span>

			<h1 class="mui-title">地理信息系统</h1>
			<a id='setting' class=" mui-pull-right mui-btn-linkn mui-icon mui-icon-bars" href="#topPopover"></a>
		</header>
		<div class="mui-content">
			<form class="mui-input-group mui-hidden" style="z-index: 999;" id="search_form">
				<div class="mui-row">
					<div class="mui-col-sm-10 mui-col-xs-10">
						<input type="text" class="mui-input-clear" id="search_txt" placeholder="请输入关键字">
					</div>
					<div class="mui-col-sm-2 mui-col-xs-2">
						<button type="button" class="mui-btn mui-btn-primary" style="width: 100%;" onclick="searchLayer();">搜索</button>

					</div>
				</div>

			</form>
			<!--<select id="type">
				<option value="Point">Point</option>
				<option value="LineString">LineString</option>
				<option value="Polygon">Polygon</option>
				<option value="Circle">Circle</option>
			</select>-->

			<div id="map"></div>
			<!--右上角弹出菜单-->
			<div id="topPopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell ">
								<a href="#" class="selected_layer" id="point_layer" layerId='4' onclick="showOrHideLayer('point_layer')">隐藏(点)</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#" id="line_layer" class="selected_layer" layerId='3' onclick="showOrHideLayer('line_layer')">隐藏(折线)</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#" id="face_layer" class="selected_layer" layerId='2' onclick="showOrHideLayer('face_layer')">隐藏(多边形)</a>
							</li>

						</ul>
					</div>
				</div>

			</div>
			<!--右下角弹出菜单-->
			<div id="bottomPopover" class="mui-popover mui-popover-bottom">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a href="#" onclick="editLayer('face')">多边形</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#" onclick="editLayer('line')">折线</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#" onclick="editLayer('point')">点</a>
							</li>
						</ul>
					</div>
				</div>

			</div>
			<div style="display: none;">
				<!-- Clickable label for Vienna -->

				<div id="marker" title="Marker"></div>
				<!-- Popup -->
				<div id="popup" title="Welcome to OpenLayers"></div>
			</div>
			<div id="confirm_div" class="confrim_style mui-hidden">
				<span class="cancle" onclick="c_cancle();">取消</span>
				<span class="confrim" id="confirmBtn">确定</span>
			</div>

		</div>
		<div id="footer">
			<div class="mui-row" style="height: 48px;">
				<div class="mui-col-sm-4  mui-col-xs-4" style="background:rebeccapurple;">
					<span class="mui-icon  icon_style">首页</span>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4 " style="background:blue;">
					<span class="mui-icon mui-icon  icon_style" id="search_btn">搜索</span>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					<a href="#bottomPopover" id='calibration' class="mui-icon mui-icon  icon_style" style="background: firebrick;color: white;">校准</a>
				</div>

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/initMap.js"></script>
		<script src="js/config.js"></script>
		<script>
			var whichLayer = '';
			var modify_layer = [];
			var type = {
				point: 'point',
				face: 'face',
				line: 'line'
			};
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};

				});
			}(mui, document));
			//搜索
			var searchButton = document.getElementById("search_btn");
			searchButton.addEventListener("tap", function(event) {
				var searchForm = document.getElementById("search_form");
				if(searchForm.classList.contains("mui-hidden")) {
					searchForm.classList.remove("mui-hidden");
				} else {
					searchForm.classList.add("mui-hidden");
				}

			});

			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener('plusready', onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API
			function onPlusReady() {
				var locationButton = document.getElementById("location_btn");
				var confrimBtn = document.getElementById("confirmBtn");
				locationButton.addEventListener("tap", function(event) {
					//定位 
					plus.geolocation.getCurrentPosition(function(p) {
						//alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
						var lat = p.coords.latitude; //维度0-90
						var lon = p.coords.longitude; //经度
						var lat2 = lat.toFixed(2);
						var lon2 = lon.toFixed(2);
						mui.toast('lat:' + lat2 + '\nlon:' + lon2);
						var location = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
						mapView.animate({
							center: location,
							duration: 2000,
							zoom: 13
						});
						// Vienna marker
						var marker = new ol.Overlay({
							position: location,
							positioning: 'center-center',
							element: document.getElementById('marker'),
							stopEvent: false
						});
						map.addOverlay(marker);

					}, function(e) {
						//alert('Geolocation error: ' + e.message);
						mui.toast('Geolocation error: ' + e.message);
					});

				});
				confrimBtn.addEventListener("tap", function(event) {

					if(whichLayer == '') {
						return;
					} else {
						//获取地理位置进行平移操作
						//定位 
						plus.geolocation.getCurrentPosition(function(p) {
							//alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
							var lat = p.coords.latitude; //维度0-90
							var lon = p.coords.longitude; //经度
							var lat2 = lat.toFixed(2);
							var lon2 = lon.toFixed(2);
							mui.toast('lat:' + lat2 + '\nlon:' + lon2);
							var location = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
							mapView.animate({
								center: location,
								duration: 2000,
								zoom: 13
							});
							// Vienna marker
							var marker = new ol.Overlay({
								position: location,
								positioning: 'center-center',
								element: document.getElementById('marker'),
								stopEvent: false
							});
							map.addOverlay(marker);

						}, function(e) {
							//alert('Geolocation error: ' + e.message);
							mui.toast('Geolocation error: ' + e.message);
						});

					}

				});
			}
			//显示或隐藏图层
			function showOrHideLayer(dom_id) {
				var ele = document.getElementById(dom_id);
				if(ele.classList.contains('selected_layer')) {
					ele.classList.remove('selected_layer');
					if(dom_id == 'point_layer')
						fcgImage2.setVisible(false);
					if(dom_id == 'line_layer')
						fcgImage1.setVisible(false);
					if(dom_id == 'face_layer')
						fcgImage.setVisible(false);
				} else {
					ele.classList.add('selected_layer');
					if(dom_id == 'point_layer')
						fcgImage2.setVisible(true);
					if(dom_id == 'line_layer')
						fcgImage1.setVisible(true);
					if(dom_id == 'face_layer')
						fcgImage.setVisible(true);
				}
			}

			//查找图层

			function searchLayer() {
				var search_val = document.getElementById('search_txt').value;
				if(search_val == '') {
					mui.toast("请输入搜索的关键字！");
					return;
				}

				mui.ajax('http://192.168.0.54:8500/gis/point/listByPointName.do?pointName=' + search_val, {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						//...
						var features = data.data.features;
						console.log(features);
						if(features.length > 0) {
							for(var i = 0; i < features.length; i++) {
         console.log(features[i].features.id);
							}

						} else {
							mui.toast('搜索不到该地点');
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
						mui.toast('搜索出现异常');
					}
				});
			}

			var overlayStyle = (function() {
				var styles = {};
				styles['Polygon'] = [
					new ol.style.Style({
						fill: new ol.style.Fill({
							color: [255, 255, 255, 0.5]
						})
					}),
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: [255, 255, 255, 1],
							width: 5
						})
					}),
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: [0, 153, 255, 1],
							width: 3
						})
					})
				];
				styles['MultiPolygon'] = styles['Polygon'];

				styles['LineString'] = [
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: [255, 255, 255, 1],
							width: 5
						})
					}),
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: [0, 153, 255, 1],
							width: 3
						})
					})
				];
				styles['MultiLineString'] = styles['LineString'];

				styles['Point'] = [
					new ol.style.Style({
						image: new ol.style.Circle({
							radius: 7,
							fill: new ol.style.Fill({
								color: [0, 153, 255, 1]
							}),
							stroke: new ol.style.Stroke({
								color: [255, 255, 255, 0.75],
								width: 1.5
							})
						}),
						zIndex: 100000
					})
				];
				styles['MultiPoint'] = styles['Point'];

				styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);

				return function(feature) {
					return styles[feature.getGeometry().getType()];
				};
			})();
			var select = new ol.interaction.Select();
			var modifyModify = new ol.interaction.Modify({
				features: select.getFeatures(),
				insertVertexCondition: function() {
					// prevent new vertices to be added to the polygons
					return !select.getFeatures().getArray().every(function(feature) {
						return feature.getGeometry().getType().match(/Polygon/);
					});
				}
			});
			var translate = new ol.interaction.Translate({
				features: select.getFeatures()
			});

			function mapclick(layers) {
				//绑定地图点击事件
				map.on('click', function(e) {
					layers.setZIndex(999);
					var view = map.getView();
					var viewResolution = view.getResolution();
					var source = layers.getSource();
					var url = source.getGetFeatureInfoUrl(e.coordinate, viewResolution, view.getProjection(), {
						'INFO_FORMAT': 'application/json'
					});
					console.log(url);
					mui.get(url, function(res) {
						if(res.features.length !== 0) {
							var vectorSource = new ol.source.Vector({
								features: (new ol.format.GeoJSON()).readFeatures(res)
							});
							var vectorLayer = new ol.layer.Vector({
								source: vectorSource,
								zoom: 1
							});
							map.addLayer(vectorLayer);
							modify_layer.push(vectorLayer);
							map.addInteraction(select);
							map.addInteraction(modifyModify);
							map.addInteraction(translate);
							document.getElementById("confirm_div").classList.remove('mui-hidden');
						}
					});

				});
			}

			function editLayer(whichType) {
				var layers = null;
				var description_text = '';
				if(whichType == type.point) {
					description_text = '点';
					layers = fcgImage2;

				}
				if(whichType == type.line) {
					var description_text = '线段';
					layers = fcgImage1;
				}
				if(whichType == type.face) {
					var description_text = '多边形';
					layers = fcgImage;
				}

				mui.toast('请在地图上点击' + description_text + '进行校准！');
				mapclick(layers);
				whichLayer = whichType;
				mui("#bottomPopover").popover('hide'); //隐藏弹出层

			}

			function c_cancle() {
				document.getElementById("confirm_div").classList.add("mui-hidden");
				if(modify_layer.length > 0) {
					for(var i = 0; i < modify_layer.length; i++) {
						map.removeLayer(modify_layer[i]);
					}
				}
				//				//还原层级关系
				//				if(whichLayer==type.point){
				//					fcgImage2.setZIndex(3);
				//				}
				//				if(whichLayer==type.line){
				//					fcgImage1.setZIndex(2);
				//				}
				//				if(whichLayer==type.face){
				//					fcgImage.setZIndex(1);
				//				}
				map.removeInteraction(select);
				map.removeInteraction(modifyModify);
				map.removeInteraction(translate);
			}
		</script>

	</body>

</html>